<template>
  <div class="t_list" :style="{ width: tableWidth }">
    <div class="list_header">
      <div
        class="header_item"
        :style="{
          width: item.width,
        }"
        v-for="(item, index) in headerListData"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>

    <div class="t_body" ref="bodyBox" :style="{ height: tableHeight }">
      <div
        class="body-content"
        ref="bodyList"
        @mouseenter="tableMouseOver"
        @mouseleave="tableMouseOut"
      >
        <div
          class="body_item"
          v-for="(item, index) in bodyListData"
          :key="index"
          :style="{ height: tableItemHeight, lineHeight: tableItemHeight }"
          :class="{
            active: index == (isInClickIndex ? rowClickIndex : rowClicki),
          }"
          @click.stop="itemClick(item, index)"
        >
          <div
            class="item_colom"
            v-for="(citem, cindex) in headerListData"
            :key="cindex"
            :style="{ width: citem.width }"
          >
            {{ item[citem.key] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 表头数据
    headerListData: {
      type: Array,
      default: () => {
        return [
          {
            name: '日期',
            width: '24%',
            key: 'date',
          },
          {
            name: '课程名称',
            width: '28%',
            key: 'name',
          },
          {
            name: '试题数量',
            width: '20%',
            key: 'examNum',
          },
          {
            name: '知识点覆盖率',
            width: '28%',
            key: 'knowledge',
          },
        ]
      },
    },
    // 表格数据
    bodyListData: {
      type: Array,
      default: () => {
        return [
          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },
          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },
          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },

          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },
          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },
          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },
          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },
          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },
          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },
          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },
          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },
          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },
          {
            date: '2021-4-15',
            name: '编辑文字内容',
            examNum: '12',
            knowledge: '10%',
          },
        ]
      },
    },
    // 几个数据开始滚动
    startsScroll: {
      type: Number,
      default: 6,
    },
    // 单行表格高度
    tableItemHeight: {
      type: String,
      default: '25px',
    },
    // 表格整体宽度
    tableWidth: {
      type: String,
      default: '95%',
    },
    // 表格容器高度
    tableHeight: {
      type: String,
      default: '160px',
    },
    // 是否开启外部传入索引值改变
    isInClickIndex: {
      type: Boolean,
      default: false,
    },
    // 点击交互取消高亮
    rowClickIndex: {
      type: Number,
      default: -1,
    },
    // 是否允许滚动
    isScroll: {
      type: Boolean,
      default: true,
    },
    // 是否允许点击交互
    isClick: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      //定时器名称
      timers: null,
      currentindex: 0,
      currentScrollTop: 0,
      //当前点击的表格
      rowClicki: -1,
    }
  },
  mounted() {
    if (this.isScroll) {
      this.tableScroll()
    }
  },
  methods: {
    //表格滚动
    tableScroll() {
      let that = this
      clearInterval(this.timers)
      this.timers = setInterval(() => {
        let ContScroll = that.$refs.bodyBox
        //获取当前滚动上去的高度
        that.currentScrollTop = parseInt(ContScroll.scrollTop)
        //获取容器可视化高度
        let currentBoxHeight = parseInt(ContScroll.scrollHeight)
        if (
          currentBoxHeight - parseInt(that.tableHeight) ==
          that.currentScrollTop
        ) {
          that.currentindex = 0
          ContScroll.scrollTo(0, 0)
        } else {
          that.currentindex++
          ContScroll.scrollTo({ top: that.currentindex, left: 0 })
        }
      }, 50)
    },

    //点击表格
    itemClick(item, index) {
      if (this.isClick) {
        this.$emit('rowClick', item, index)
        if (!this.isInClickIndex) {
          if (this.rowClicki == index) {
            this.rowClicki = -1
          } else {
            this.rowClicki = index
          }
        }
      }
    },

    // 鼠标移出
    tableMouseOut() {
      if (this.isScroll) {
        this.tableScroll()
        let ContScroll = this.$refs.bodyBox
        //获取当前滚动上去的高度
        this.currentindex = parseInt(ContScroll.scrollTop)
      }
    },

    // 鼠标移入
    tableMouseOver() {
      clearInterval(this.timers)
    },
  },
  // 在页面销毁之前清除掉定时器
  beforeDestroy() {
    this.timers && clearInterval(this.timers)
  },
}
</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.active {
  background: rgba(255, 228, 38, 0.35) !important;
}
.t_list {
  box-sizing: border-box;
  font-size: 12px;
  pointer-events: all;
  .list_header {
    box-sizing: border-box;
    display: flex;
    .header_item {
      height: 25px;
      line-height: 25px;
      box-sizing: border-box;
      background-color: #39698d;
      color: #F2F2F2;
      font-family: 'Helvetica';
      text-align: left;
      padding-left: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      // border-right: 2px solid rgba(15, 52, 89, 0.8);
    }
  }
  .t_body {
    box-sizing: border-box;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      position: absolute; /*滚动条整体样式*/
      width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 5px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 20px;
      box-shadow: inset 0 0 5px rgba(#545d7c, 0.2);
      background: #545d7c;
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(#29355b, 1);
      border-radius: 10px;
      background: transparent;
    }
    .body-content {
      position: absolute;
      width: 100%;
      height: 100%;
      .body_item {
        display: flex;
        overflow: hidden;
        border-bottom: 1px solid rgba(#ccc, 0.5);
        .item_colom {
          font-size: 12px;
          box-sizing: border-box;
          color: #90dff2;
          text-align: left;
          padding-left: 8px;
          white-space: nowrap;
          // text-overflow: ellipsis;
          overflow: hidden;
          > div {
            white-space: nowrap;
            // text-overflow: ellipsis;
            // overflow: hidden;
          }
        }
      }
      .body_item:hover {
        background: rgba(#1b8eb2, 0.5);
      }
    }
  }
}
</style>
